<template>
    <div class="edit-address">
        <div class="layer" v-show="showLayer"></div>
        <div class="edit-form">
            <div class="edit-msg">
                <span class="title-msg">收件人</span>
                <input type="text" placeholder="收件人姓名" v-model="msg.name">
            </div>
            <div class="edit-msg">
                <span class="title-msg">手机号码</span>
                <input type="text" placeholder="收件人电话" v-model="msg.tel">
            </div>
            <div class="edit-msg" @click="showPicker">
                <span class="title-msg">所在地区</span>
                <span v-if="!msg.address">请选择</span>
                <span v-if="msg.address">{{msg.address}}</span>
                <img src="~assets/icons/arrow.png" alt="">
            </div>
            <div class="edit-msg">
                <span class="title-msg">详细地址</span>
                <input type="text" placeholder="收件人地址" v-model="msg.addressDetail">
            </div>
            <div class="edit-msg">
                <span class="title-msg">设为默认地址</span>
                <mt-switch v-model="msg.default"></mt-switch>
            </div>
        </div>
        <div class="edit-btn" @click="saveAddress">
            <span>确认修改</span>
        </div>
        <div class="add-picker" :style="{bottom:layerTop+'rem'}">
            <div class="picker-head">
                <span>请选择地区</span>
            </div>
            <div class="choose-head">
                <span v-for="(item,index) in chooseCity.selected" :key="index"  @click="chooseLv(index)">{{item}}</span>
            </div>
            <div class="city-list">
                <span v-for="item in chooseCity.all" :key="item.code" :id="item.code" @click="selectCity(item.name, item.sub, $event)">{{item.name}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { Switch, Indicator, Toast } from 'mint-ui';
import city from './citys'

export default {
    name:'addAddress',
    data(){
        return {
            defaultAddress: false,
            msg:{},
            showLayer:false,
            chooseCity:{
                selected:[],
                all:city,
                subItem:[]
            },
            address:'',
            layerTop: -10,
            lv1:true,
            lv2:true,
            lv3:true
        }
    },
    methods:{
        onValuesChange(picker, values){
            
        },
        showPicker(){
            this.chooseCity = {
                selected:[],
                all:city,
                subItem:[]
            }
            this.layerTop = 0;
            this.showLayer = true;
            this.lv1 = true;
            this.lv2 = true;
            this.lv3 = true;
        },
        selectCity(name, sub,ev){
            // console.log(name);
            if(this.lv1){
                this.chooseCity.selected = [];
                this.chooseCity.selected.push(name);
                this.chooseCity.all = sub;
                this.chooseCity.subItem.push(sub); 
                this.lv1 = false;
                return;
            }

            if(this.lv2){
                this.chooseCity.selected.splice(1,2);
                this.chooseCity.selected.push(name);
                this.chooseCity.all = sub;
                this.chooseCity.subItem.push(sub);
                this.lv2 = false;
                return;
            }

            if(this.lv3){
                this.chooseCity.selected.push(name);
                this.lv3 = false;
                this.showLayer = false;
                this.layerTop = -1000/100;
                this.address = this.chooseCity.selected.join('-');
                console.log(this.address);
                this.msg.address = this.address;
                return;
            }
        },
        chooseLv(index){
            switch (index){
                case 0:
                    this.chooseCity.all = city;
                    this.chooseCity.selected.splice(1,2);
                    this.lv1 = true;
                    this.lv2 = true;
                    this.lv3 = true;
                    break;
                case 1:
                    this.chooseCity.all = this.chooseCity.subItem[0];
                    this.chooseCity.selected.splice(2,1);
                    this.lv1 = false;
                    this.lv2 = true;
                    this.lv3 = true;
                    break;    
            }
        },
        saveAddress(){
            console.log(this.msg);
            let that = this;
            let token = localStorage.getItem('token');
            let msg = this.msg;
            let temArr = this.msg.address.split('-');
            let temObj = {};
            temObj.id = msg.id;
            temObj.name = msg.name;
            temObj.phone = msg.tel;
            temObj.address = msg.addressDetail;
            temObj.province = temArr[0];
            temObj.city = temArr[1];
            temObj.area = temArr[2];
            if(msg.default == true){
                temObj.status = 1;
            }else{
                temObj.status = 2;
            }
            console.log(temObj);
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            })
            that.$ajax(that,'post', that.$api.addressEdit, temObj, token, function(res){
                console.log(res);
                if(res.data['error_code'] == 0){
                    that.$router.push('/address/list')
                }else{
                   //报错信息展示 
                   Toast({
                        message: res.data['msg'],
                        position: 'bottom',
                        duration: 3000
                    });
                }
                Indicator.close();
            })
        }
    },
    mounted(){
        this.$store.state.tab = '修改地址';
    },
    activated(){
        this.$store.state.tab = '修改地址';
        console.log(this.$route);
        let addressMsg = this.$route.params.address;
        let temAddressArr = addressMsg['address'].split(' ');
        let temObj = {};
        temObj.id = addressMsg.id;
        temObj.name = addressMsg.name;
        temObj.tel = addressMsg.tel;
        temObj.default = addressMsg.default;
        temObj.address = temAddressArr[0];
        temObj.addressDetail = temAddressArr[1];
        this.msg = temObj;
        console.log(this.msg);  
    },
    components:{
        Switch,
        Indicator
    }
}
</script>

<style lang='less'>
@rem:100rem;

.edit-address{
    width: 750/@rem;
    padding-top: 10/@rem;
    .edit-form{
        width: 100%;
        .edit-msg{
            height: 72/@rem;
            width: 100%;
            box-sizing: border-box;
            padding: 0 20/@rem;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-bottom: 1px solid #f9f9f9;
            background: #ffffff;
            .title-msg{
                display: inline-block;
                width: 168/@rem;
                text-align: start;
            }
            input{
                outline: none;
                border: none;
            }
        }
        .edit-msg:nth-of-type(3){
            position: relative;
            span:nth-of-type(2){
                color: #868686;
            }
            img{
                height: 30/@rem;
                width: 30/@rem;
                position: absolute;
                right: 10/@rem;
                top: 21/@rem;
                
            }
        }
        .edit-msg:nth-of-type(5){
            height: 108/@rem;
            .mint-switch{
                width: 136/@rem;
                height: 60/@rem;
                margin-left: 410/@rem;
            }
        }
    }
    .edit-btn{
        height: 80/@rem;
        width: 670/@rem;
        background-color: #6699ff;
        border-radius: 8/@rem;
        margin: 0 auto;
        margin-top: 100/@rem;
        text-align: center;
        line-height: 80/@rem;
        span{
            color: #ffffff;
        }
    }
    .edit-btn:active{
        background: #5184e9;
    }
    .layer{
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3); 
    }
    .add-picker{
        width: 750/@rem;
        height: 1000/@rem;
        z-index: 99999;
        background: #ffffff;
        position: fixed;
        bottom: -1000/@rem;
        left: 0;
        right: 0;
        border-top-left-radius: 30/@rem;
        border-top-right-radius: 30/@rem;
        transition: all 0.3s linear;
        .picker-head{
            margin-top: 20/@rem;
        }
        .choose-head{
            width: 100%;
            height: 60/@rem;
            margin-top: 10/@rem;
            box-sizing: border-box;
            padding: 0 20/@rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background: #f6f6f6;
            span{
                display: inline-block;
                margin: 0 30/@rem;
            }
        }
        .city-list{
            width: 100%;
            height: 850/@rem;
            box-sizing: border-box;
            padding: 0 40/@rem;
            overflow-y: scroll;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 20/@rem;
            span{
                display: block;
                width: 100%;
                text-align: start;
                padding: 10/@rem 0;
            }
            span:active{
                background: #f6f6f6;
            }
        }
    }
}
</style>
